<template>
  <div>
    <!-- 输入栏和按钮 -->
    <div style=" line-height: 40px;margin-bottom: 4px;height: 40px;">
      <el-input style="width: 200px; float: left;margin-left: 5px;" placeholder="请输入商品名称" v-model.trim="goodNameKey"
        @keyup.enter.native="loadGoods(); messageAlert()" suffix-icon="el-icon-search" maxlength="20">
      </el-input>

      <!-- 一系列按钮 -->
      <el-button type="primary" style="float: left; margin-left: 5px;" @click="loadGoods(); messageAlert()">搜索
      </el-button>
      <el-button type="warning" style="float: left; margin-left: 7px;" @click="goodNameKey = ''">重置
      </el-button>
      <!-- <el-button style="float: right; margin-left: 20px;" type="danger" @click="batchDeleteGoods()">批量删除<i class="el-icon-delete"
                        style="padding-left: 5px;"></i></el-button> -->
      <el-popconfirm title="确定删除该商品吗？" icon-color="red" @confirm="batchDeleteGoods"
        style="float: right;  margin-left: 15px; margin-top:-2px; ">
        <el-button slot="reference" type="danger">批量删除</el-button>
      </el-popconfirm>

      <!--  -->
      <el-button style="float: right; margin-left: 40px; " type="primary" @click="goAddpage()">
        新增<i class="el-icon-circle-plus-outline" style="padding-left: 5px;"></i></el-button>
      <!--点击新增跳出来的表单被修改按钮也使用  -->
    </div>

    <div style="height: 90%;padding-top: 0px;padding-bottom: 5px;margin-top: 10px;">
      <!-- 表格 -->
      <el-table :data="tableData" border stripe :header-cell-class-name="headerStyle"
        @selection-change="handSelectChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="storeName" label="名称" width="280"></el-table-column>
        <el-table-column label="图片" width="140">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src="scope.row.image" alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src="scope.row.image" style="width: 30px;height: 30px">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="100"></el-table-column>
        <el-table-column prop="vipPrice" label="VIP价格" width="100"></el-table-column>
        <el-table-column prop="otPrice" label="市场价格" width="100"></el-table-column>
        <el-table-column prop="postage" label="邮费" width="100"></el-table-column>
        <el-table-column prop="cost" label="成本" width="100"></el-table-column>
        <el-table-column prop="sales" label="销售量" width="100"></el-table-column>
        <el-table-column prop="stock" label="库存" width="100"></el-table-column>
        <el-table-column prop="browse" label="浏览量" width="100"></el-table-column>

        <el-table-column label="操作">

          <!--slot-scope="scope"一个添加条件 叫做插槽;  -->
          <template slot-scope="scope">
            <el-button type="text">编辑
            </el-button>
            <!-- 删除按钮，弹出框提醒 Popconfirm 气泡确认框，Popover 弹出框不成功-->
            <el-popconfirm title="确定删除该用户吗？" icon-color="red" @confirm="deleteGood(scope.row.id)">
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>
    </div>

    <div class="block" style="padding: 5px;margin-bottom: -10px;padding-left: 380px;">
      <span class="demonstration"></span>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[5, 8, 12, 15]" :page-size="8" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  import myUpload from 'vue-image-crop-upload/upload-2.vue'

  export default {
    name: 'Goods',
    data() {
      return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        tableData: [], //页面数据
        total: 0, //页面大小
        pageNum: 1, //页码
        pageSize: 8, //页大小

        //关键字查询
        goodNameKey: '',

        //表格加载图片
        loading: true,

        tableRowClassName: 'tableRowClassName',

        // 弹出框提醒
        visible: false,

        // 新增表单信息
        dialogFormVisible: false,

        formImageUrl: '',
        formLabelWidth: '200px',

        // 多选情况
        multipleSelection: [],

        headers: {
          'Authorization': JSON.parse(localStorage.getItem('token')),
        },



      }
    },
    components: {
      myUpload
    },
    methods: {
      goAddpage() {
        //通过路由导航对象router的push函数进行页面跳转
        this.$router.push('/goods/details');
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.loadGoods();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.loadGoods();
      },
      headerStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        return 'tableStyle'
      },
      //获得后台goods数据
      loadGoods() {
        // 获得数据之前加载加载页面
        const that = this;
        that.loading = true;
        this.$axios.get('/storeProduct/page', {
            params: {
              pageNum: that.pageNum,
              pageSize: that.pageSize,
              goodName: that.goodNameKey,
            }
          })
          .then(function (response) {
            //获得数据之后取消加载页面 
            that.tableData = response.data.records;
            that.total = response.data.total;
          })
          .catch(function (error) {
            console.log(error);
          })
      },
      // 消息提醒方法
      messageAlert() {
        this.$message({
          message: '查询成功！',
          type: 'success',
          duration: 1600
        });
      },
      messageAlert2() {
        this.$message({
          message: '提交成功',
          type: 'success',
          duration: 1600
        });
      },
      messageAlert3() {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1600
        });
      },

      //多选处理
      handSelectChange(val) {
        // 把选择的数字赋值data
        this.multipleSelection = val;
      },

      // 批量删除处理
      batchDeleteGoods() {
        let ids = this.multipleSelection.map(v => Number.parseInt(v.id));
        const that = this;
        // delet只可以传递一个值，不可以传递对象数组
        this.$axios.post('/storeProduct/del/batch', {
            ids: ids
          })
          .then(function (response) {
            that.loadGoods();
            that.messageAlert3();
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
      },

      // 删除用户
      deleteGood(id) {
        // 获得数据之前加载加载页面
        const that = this;
        that.loading = true;
        this.$axios.delete('/storeProduct/' + id)
          .then(function (response) {
            that.loadGoods();
            that.messageAlert3();
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
      },
    },


    created() {
      this.loadGoods();
    },
  }

</script>

<style>
  .tableStyle {
    background-color: rgb(236, 236, 236) !important;
    color: rgb(0, 0, 0);
    font-weight: 500;
    font-size: medium;
  }
